<template>
  <div class="processcircle">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" :width = "radius" :height = "radius" viewBox = "0 0 100 100">
      <circle cy = '50' cx = '50' r = '50' fill = 'transparent' class="processbackground"></circle> 
      <circle cy = '50' cx = '50' r = '50' fill = 'transparent' class="processbar" :stroke-dasharray="dashArray" 
      :stroke-dashoffset="dashOffset"></circle> 
    </svg>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props:{
    radius:{
      type:Number,
      default:100
    },
    percent:{
      type:Number,
      default:0
    }
  },
  data(){
    return{
      dashArray:Math.PI*100,
    }
  },
  computed:{
    dashOffset(){
      return (1-this.percent)*this.dashArray;
    }
  },
  watch:{
    percent(newpercent){

    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
.processcircle
  position relative
  circle
    stroke-width 8px
    transform scale(.9)
    transform-origin center
    &.processbackground
      stroke $color-theme-d
    &.processbar
      transform: scale(.9) rotate(-90deg)
      stroke $color-theme

</style>